<template>
    <div class="wrapper">
        <div class="box">
            <div class="tabs-box" ref="cont">
                <ul class="List tabs-box-roll">
                    <li class="List-item"><span :class="{'cur': now === '折扣榜'}" @click="now = '折扣榜'">折扣榜</span></li>
                    <li class="List-item"><span :class="{'cur': now === '好物业榜'}" @click="now = '好物业榜'">好物业榜</span></li>
                    <li class="List-item"><span :class="{'cur': now === '壕无人性榜'}" @click="now = '壕无人性榜'">壕无人性榜</span>
                    </li>
                    <li class="List-item"><span :class="{'cur': now === '成就榜'}" @click="now = '成就榜'">成就榜</span></li>
                    <li class="List-item"><span :class="{'cur': now === '热搜榜'}" @click="now = '热搜榜'">热搜榜</span></li>
                    <li class="List-item"><span :class="{'cur': now === '热卖榜'}" @click="now = '热卖榜'">热卖榜</span></li>
                    <li class="List-item"><span :class="{'cur': now === '关注榜'}" @click="now = '关注榜'">关注榜</span></li>
                </ul>
            </div>

            <div class="bd">
                <div class="bd-warp" v-show="now === '折扣榜'" ref="warp">
                    <ul >
                        <li class="item" v-for="item of ListList" :key="item.id">
                            <div class="item-left">
                                <div class="left-positioning">
                                    <span :class="item.number >= '4' ? 'h-left-positioning-top'    : 'l-left-positioning-top'"></span>
                                    <span :class="item.number >= '4' ? 'h-left-positioning-butotn' : 'l-left-positioning-butotn'"></span>
                                    <span :class="item.number >= '4' ? 'h-left-positioning-number' : 'l-left-positioning-number'">{{item.number}}</span>
                                </div>
                                <img :src="item.imgUrl">
                            </div>
                            <div class="item-right">
                                <h2>
                                    {{item.title}}&nbsp;
                                    <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                                </h2>
                                <p class="subtitle">{{item.subtitle}}</p>
                                <p class="spot">
                                    <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                                </p>
                                <p class="price">
                                    <span>{{item.PriceArea.price}}</span>
                                    <span class="priceFont">{{item.PriceArea.unit}}</span>
                                    <span class="model">{{item.PriceArea.area}}</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--        <div v-show="now === '好物业榜'">
                          <ul>
                            <li class="item" v-for="item of ListList" :key="item.id">
                              <div class="item-left">
                                <div class="left-positioning">
                                  <span :class="item.number >= '4' ? 'h-left-positioning-top'    : 'l-left-positioning-top'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-butotn' : 'l-left-positioning-butotn'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-number' : 'l-left-positioning-number'">{{item.number}}</span>
                                </div>
                                <img :src="item.imgUrl">
                              </div>
                              <div class="item-right">
                                <h2>
                                  {{item.title}}&nbsp;
                                  <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                                </h2>
                                <p class="subtitle">{{item.subtitle}}</p>
                                <p class="spot">
                                  <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                                </p>
                                <p class="price">
                                  <span>{{item.PriceArea.price}}</span>
                                  <span class="priceFont">{{item.PriceArea.unit}}</span>
                                  <span class="model">{{item.PriceArea.area}}</span>
                                </p>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div v-show="now === '壕无人性榜'">
                          <ul>
                            <li class="item" v-for="item of ListList" :key="item.id">
                              <div class="item-left">
                                <div class="left-positioning">
                                  <span :class="item.number >= '4' ? 'h-left-positioning-top'    : 'l-left-positioning-top'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-butotn' : 'l-left-positioning-butotn'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-number' : 'l-left-positioning-number'">{{item.number}}</span>
                                </div>
                                <img :src="item.imgUrl">
                              </div>
                              <div class="item-right">
                                <h2>
                                  {{item.title}}&nbsp;
                                  <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                                </h2>
                                <p class="subtitle">{{item.subtitle}}</p>
                                <p class="spot">
                                  <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                                </p>
                                <p class="price">
                                  <span>{{item.PriceArea.price}}</span>
                                  <span class="priceFont">{{item.PriceArea.unit}}</span>
                                  <span class="model">{{item.PriceArea.area}}</span>
                                </p>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div v-show="now === '成就榜'">
                          <ul>
                            <li class="item" v-for="item of ListList" :key="item.id">
                              <div class="item-left">
                                <div class="left-positioning">
                                  <span :class="item.number >= '4' ? 'h-left-positioning-top'    : 'l-left-positioning-top'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-butotn' : 'l-left-positioning-butotn'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-number' : 'l-left-positioning-number'">{{item.number}}</span>
                                </div>
                                <img :src="item.imgUrl">
                              </div>
                              <div class="item-right">
                                <h2>
                                  {{item.title}}&nbsp;
                                  <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                                </h2>
                                <p class="subtitle">{{item.subtitle}}</p>
                                <p class="spot">
                                  <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                                </p>
                                <p class="price">
                                  <span>{{item.PriceArea.price}}</span>
                                  <span class="priceFont">{{item.PriceArea.unit}}</span>
                                  <span class="model">{{item.PriceArea.area}}</span>
                                </p>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div v-show="now === '热搜榜'">
                          <ul>
                            <li class="item" v-for="item of ListList" :key="item.id">
                              <div class="item-left">
                                <div class="left-positioning">
                                  <span :class="item.number >= '4' ? 'h-left-positioning-top'    : 'l-left-positioning-top'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-butotn' : 'l-left-positioning-butotn'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-number' : 'l-left-positioning-number'">{{item.number}}</span>
                                </div>
                                <img :src="item.imgUrl">
                              </div>
                              <div class="item-right">
                                <h2>
                                  {{item.title}}&nbsp;
                                  <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                                </h2>
                                <p class="subtitle">{{item.subtitle}}</p>
                                <p class="spot">
                                  <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                                </p>
                                <p class="price">
                                  <span>{{item.PriceArea.price}}</span>
                                  <span class="priceFont">{{item.PriceArea.unit}}</span>
                                  <span class="model">{{item.PriceArea.area}}</span>
                                </p>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div v-show="now === '热卖榜'">
                          <ul>
                            <li class="item" v-for="item of ListList" :key="item.id">
                              <div class="item-left">
                                <div class="left-positioning">
                                  <span :class="item.number >= '4' ? 'h-left-positioning-top'    : 'l-left-positioning-top'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-butotn' : 'l-left-positioning-butotn'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-number' : 'l-left-positioning-number'">{{item.number}}</span>
                                </div>
                                <img :src="item.imgUrl">
                              </div>
                              <div class="item-right">
                                <h2>
                                  {{item.title}}&nbsp;
                                  <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                                </h2>
                                <p class="subtitle">{{item.subtitle}}</p>
                                <p class="spot">
                                  <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                                </p>
                                <p class="price">
                                  <span>{{item.PriceArea.price}}</span>
                                  <span class="priceFont">{{item.PriceArea.unit}}</span>
                                  <span class="model">{{item.PriceArea.area}}</span>
                                </p>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div v-show="now === '关注榜'">
                          <ul>
                            <li class="item" v-for="item of ListList" :key="item.id">
                              <div class="item-left">
                                <div class="left-positioning">
                                  <span :class="item.number >= '4' ? 'h-left-positioning-top'    : 'l-left-positioning-top'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-butotn' : 'l-left-positioning-butotn'"></span>
                                  <span :class="item.number >= '4' ? 'h-left-positioning-number' : 'l-left-positioning-number'">{{item.number}}</span>
                                </div>
                                <img :src="item.imgUrl">
                              </div>
                              <div class="item-right">
                                <h2>
                                  {{item.title}}&nbsp;
                                  <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                                </h2>
                                <p class="subtitle">{{item.subtitle}}</p>
                                <p class="spot">
                                  <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                                </p>
                                <p class="price">
                                  <span>{{item.PriceArea.price}}</span>
                                  <span class="priceFont">{{item.PriceArea.unit}}</span>
                                  <span class="model">{{item.PriceArea.area}}</span>
                                </p>
                              </div>
                            </li>
                          </ul>
                        </div>-->
            </div>
        </div>

    </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: 'LeaderboardList',
    data () {
      return {
        swiperOptions: {
          pagination: '.swiper-pagination',
          loop: false,
          slidesPerView: 4,
          observer: true,
          observeParents: true,
          //paginationType : 'progress',
          //paginationType : 'custom',
        },
        now: '折扣榜',
        ListList: [{
          id: '0001',
          number: '1',
          imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20190517/9a45656e4aa84e518e2613344623e65b.jpg?x-oss-process=image/resize,w_250',
          title: '富力湾',
          Anglelist: ['严选', '在售'],
          subtitle: '惠东县',
          BrightSpot: [{x: '车位充足'}, {x: '海景'}, {x: '小户型'}, {x: '高绿化'}],
          PriceArea: {
            price: '13700',
            unit: '元/平',
          },
          score: '10'
        }, {
          id: '0002',
          number: '2',
          imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200204/292287accaf34795b43569b3d9298bb7.jpg?x-oss-process=image/resize,w_250',
          title: '聚泰启程',
          subtitle: '大亚湾',
          Anglelist: ['严选', '在售'],
          BrightSpot: [{x: '车位充足'}, {x: '海景'}, {x: '小户型'}],
          PriceArea: {
            price: '13700',
            unit: '元/平',
          },
          score: '9.8'
        }, {
          id: '0003',
          number: '3',
          imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/63420b7fec5c4aee958d6a23a5d30d50.jpg?x-oss-process=image/resize,w_250',
          title: '海伦堡中侨公馆',
          subtitle: '大亚湾',
          Anglelist: ['在售'],
          BrightSpot: [{x: '车位充足'}, {x: '海景'}, {x: '小户型'}, {x: '高绿化'}],
          PriceArea: {
            price: '13700',
            unit: '元/平',
          },
          score: '8.6'
        }, {
          id: '0004',
          number: '4',
          imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/63420b7fec5c4aee958d6a23a5d30d50.jpg?x-oss-process=image/resize,w_250',
          title: '海伦堡中侨公馆',
          subtitle: '大亚湾',
          Anglelist: ['在售'],
          BrightSpot: [{x: '车位充足'}, {x: '海景'}, {x: '小户型'}, {x: '高绿化'}],
          PriceArea: {
            price: '13700',
            unit: '元/平',
          },
          score: '8.6'
        }, {
          id: '0005',
          number: '5',
          imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/63420b7fec5c4aee958d6a23a5d30d50.jpg?x-oss-process=image/resize,w_250',
          title: '海伦堡中侨公馆',
          subtitle: '大亚湾',
          Anglelist: ['在售'],
          BrightSpot: [{x: '车位充足'}, {x: '海景'}, {x: '小户型'}, {x: '高绿化'}],
          PriceArea: {
            price: '13700',
            unit: '元/平',
          },
          score: '8.6'
        }]
      }
    },
    created () {
      this.$nextTick(() => {
        this.initScroll()
      })
    },
    // 当页面加载后钩子
    mounted () {
      // 页面滑动插件，滑动的是(wrapper 这个DOM ，DOM是通过ref属性定义，$refs获取该DOM)
      this.scroll = new BScroll(this.$refs.cont, {
        startX: 0,
        click: true,
        scrollX: true,
        // 忽略竖直方向的滚动
        scrollY: false,
        eventPassthrough: 'vertical'
      })
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.warp, {})
      })
    },
    // 方法
    methods: {}
  }
</script>

<style scoped lang="stylus">
    @import "~styles/varibles.styl"
    .wrapper
        wrapper()

    .title
        title()

    // tab 栏样式
    .tabs-box
        overflow hidden
        line-height 2rem

    .tabs-box-roll
        display inline-block
        white-space nowrap

    .bd-warp
        height 10rem
        overflow hidden


    .List .List-item
        position: relative;
        display: inline-block;
        width: 2rem;
        line-height: 1rem
        margin-right .1rem
        padding .3rem 0

    .List-item span
        box-sizing border-box
        position: relative;
        display: inline-block;
        width: 2rem;
        line-height: .7rem
        border-radius .1rem
        background white
        text-align: center
        cursor: pointer

    .List-item .cur
        display block
        width 100%
        height 100%
        background: #a3c512
        color: #fff


    .List-item .cur::after
        content " "
        position absolute
        top .68rem
        left 38%
        width: 0
        height: 0
        border-width: 8px
        border-style: solid
        border-color: #a3c512 transparent transparent


    .bd
        width: 100%
        overflow hidden
        position absolute
        top 3rem


    .item
        width 100%
        box-sizing border-box
        border-bottom: .026667rem solid #f8f7f7
        display: flex
        align-items center
        padding: .2rem
        margin-bottom: .3rem
        background: #fff
        box-shadow: 0 0.08rem 0.16rem 0 rgba(0, 0, 0, .04)
        border-radius: .1rem

    .item-left
        width: 2rem
        height: 1.8rem
        position: relative

    /*overflow hidden*/


    .left-positioning
        position absolute
        left 20%
        top -.2rem
        display flex
        flex-direction column
        align-items center


    .l-left-positioning-top
        width .5rem
        height .3rem
        background #00b3ea

    .l-left-positioning-butotn
        float: left;
        width: 0;
        height: 0;
        border-width: 13px;
        border-style: solid;
        border-color: #00b3ea transparent transparent transparent;

    .l-left-positioning-number
        color white
        font-size .3rem
        position absolute
        top .05rem
        right 0
        bottom 0
        left .18rem

    .h-left-positioning-top
        width .5rem
        height .3rem
        background #cacaca

    .h-left-positioning-butotn
        float: left;
        width: 0;
        height: 0;
        border-width: 13px;
        border-style: solid;
        border-color: #cacaca transparent transparent transparent;

    .h-left-positioning-number
        color white
        font-size .3rem
        position absolute
        top .05rem
        right 0
        bottom 0
        left .18rem

    .item-left img
        border-radius .1rem
        width: 100%
        height: 100%

    .item-right
        flex: 1
        text-align: left
        padding-left: .346667rem
        position: relative

    .item-right
        color #ccc
        font-size 0.012rem

    .item-right h2
        font-size .3rem
        font-weight 500
        color black
        margin-bottom .1rem
        line-height .4rem
        overflowEllipsis()

    .item-right .Strict
        box-sizing border-box
        background #504f5e
        color #f1ddb5
        padding 0.04rem 0.08rem
        border-radius .05rem
        font-size .2rem
        margin 0 .05rem

    .item-right .sale
        box-sizing border-box
        background white
        color #a3c512
        padding 0.04rem 0.08rem
        border 0.02rem solid #a3c512
        border-radius .05rem
        font-size .2rem
        margin 0 .05rem

    .subtitle
        padding-top .12rem

    .item-right .spot
        margin-top .3rem

    .item-right .price
        margin-top .25rem
        font-size .3rem


    .spot span
        background #f3f5f8
        color #9ba6aa
        margin-right .1rem
        padding .05rem .1rem
        border-radius .1rem


    .price span
        color #ff9100
        font-size .3rem
        font-weight 800

    .price .model
        color #798089
        font-size .2rem

    .price .priceFont
        font-size .2rem


    .List-right
        position absolute
        top 0
        right 0
        display flex
        flex-direction column
        align-items center

    .List-right span
        color red
        font-size .35rem

    .List-right p
        color #ccc
        margin-top .1rem

    .List-more
        width: 100%
        height: 1.066667rem
        line-height: 1.066667rem
        border-radius: .266667rem
        background: #f0f2f5
        text-align: center
        font-size: .346667rem
        font-family: PingFang-SC-Medium
        font-weight: 500
        color: #6a81a2
        margin-top: .2rem
        margin-bottom: .3rem

</style>
